<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
        <title>报名表</title>
        <script src="js/flexible.debug.js"></script>
        <link href="css/apply.css" rel="stylesheet">
        <link rel="stylesheet" href="css/swiper-3.4.2.min.css" />
        <link rel="stylesheet" type="text/css" href="./css/bg.css">
    </head>
    <body>
        <div id="wrap">
            <div id="header">
                <img class="LOGO" src="img/LOGO.png" alt="vtmer">
                <a href="index.html" class="BTN-HOME"><img src="img/BTN-HOME.png" alt="hmoe"/></a>
            </div>
            <div class="mainbody">
                <div class="upimg">
                    <img src="img/apply/headbg.png" alt="headbg" />
                    <img src="img/apply/headqinyuan.png" height="640" width="640" alt="userimg" id="userimg" />
                    <img src="img/apply/camera.png" height="62" width="62" alt="camera"id="camera"/>
                    <input type="file" name="avatar" id='upImg' accept="image/*" form="FupForm">
                </div>
                <div class="mainForm">
                    <div class="mainForm-content">
                        <div class="mainForm-content-menu">
                            <div>
                                <span class="menu-number menu-number-active">①</span>
                                <span class="menu-text memu-active">选择组别</span>
                                <span class="menu-symbol">&gt;&gt;</span>
                                <span class="menu-number">②</span>
                                <span class="menu-text">基本信息</span>
                                <span class="menu-symbol">&gt;&gt;</span>
                                <span class="menu-number">③</span>
                                <span class="menu-text">详细信息</span>
                            </div>
                        </div>
                        <div class="mainForm-content-banner">
                            <div class="banner-list" >
                                <div class="mainForm-content-groupChoice" >
                                    <div>
                                        <p>你想加入哪一组？</p>
                                        <div class="choice-buttons">
                                            <input type="button" value="设计组" class="active choice-button" />
                                            <input type="button" value="前端组" class=" choice-button"  />
                                            <input type="button" value="后台组" class=" choice-button" />
                                            <input type="button" value="运营组" class=" choice-button" />
                                        </div>
                                        <div class="choice-introduce">
                                            <div class="choice-introduce-active"><p> 工作室对外的策划者， 产品的背后分析优化者， 用户的产品维护者，</p></div>
                                            <div><p> 前端前端， 产品的背后分析优化者， 用户的产品维护者，</p></div>
                                            <div><p> 后台组对外的策划者， 产品的背后分析优化者， 用户的产品维护者，</p></div>
                                            <div><p> 运营运营的策划者， 产品的背后分析优化者， 用户的产品维护者，</p></div>
                                        </div>
                                    </div>
                                    <input type="button" value="下一步" class="next" id="next-baseMsg"/>
                                </div>
                                <div class="mainForm-content-baseMsg">
                                    <form name="FupForm" id='FupForm' >
                                        <div>
                                            <p><span id="name">∗</span>姓名</p>
                                            <input type="text" id="Username" name='name'/>
                                        </div>
                                        <div>
                                            <p><span>∗</span>学院专业</p>
                                            <input type="text" id="Usercollege" name='academy' />
                                        </div>
                                        <div>
                                             <p><span>∗</span>联系方式</p>
                                            <input type="text" id="Usernumber" name="phone" />
                                        </div>
                                    </form>
                                    <input type="button" value="上一步" id="previous-choice" />
                                    <input type="button" value="下一步" id="next-detailMsg"/>
                                </div>
                                <div class="mainForm-content-detailMsg">
                                        <p>个人简介</p>
                                        <textarea id="signupBrief" placeholder="请在此输入简介" form='FupForm' name="intro"></textarea>
                                        <p>个人经历</p>
                                        <textarea id="signupBrief" placeholder="请在此输入经历" form="FupForm" name="exper"></textarea>
                                    <input type="button" value="上一步" id="previous-baseMsg"/>
                                    <input type="button" value="完成" id="completed"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 背景 -->
        <div class="BgContain">
            <ul class="scene" id="S1" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.60" id='bg1'><img src="img/bg1.png"></li>
            </ul>
            <ul class="scene" id="S2" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.60" id='bg2'><img src="img/bg7.png"></li>
            </ul>
            <ul class="scene" id="S3" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.40" id='bg3'><img src="img/bg3.png"></li>
            </ul>
            <ul class="scene" id="S4" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.60" id='bg4'><img src="img/bg6.png"></li>
            </ul>
            <ul class="scene" id="S5" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.80" id='bg5'><img src="img/bg4.png"></li>
            </ul>
            <ul class="scene" id="S6" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg9.png"></li>
            </ul>
            <ul class="scene" id="S7" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="1.00" id='bg7'><img src="img/bg11.png"></li>
            </ul>
            <ul class="scene" id="S8" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="0.60" id='bg4'><img src="img/bg10.png"></li>
            </ul>
            <ul class="scene" id="S9" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="0.80" id='bg5'><img src="img/bg8.png"></li>
            </ul>
            <ul class="scene" id="S10" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg2.png"></li>
            </ul>
            <ul class="scene" id="S11" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg12.png"></li>
            </ul>
            <ul class="scene" id="S12" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg5.png"></li>
            </ul>
        </div>
        <!-- Loading提交 -->
        <div class="LoadingWrap">
            <div class="loading">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <script src="js/jq.min.js"></script>
        <script src="js/apply/apply.js"></script>
        <script src='./js/jquery.parallax.min.js'></script>
    </body>
</html>